<script setup lang="ts">
	// import HelloWorld from "./components/HelloWorld.vue";
	import { computed, onMounted } from 'vue'
	import { useRoute } from 'vue-router'
	import TabBar from './components/TabBar.vue'
	import CloudComputeModal from '@/components/CloudComputeModal.vue'
	
	// 引入 vconsole 调试工具
	import VConsole from 'vconsole'
	
	const route = useRoute()
	
	// 判断当前路由是否需要显示底部tabbar
	const showTabBar = computed(() => {
		// 只在AI直播和我的页面显示tabbar
		return route.path === '/' || route.path === '/profile'
	})
	
	// 初始化 vconsole（始终启用）
	onMounted(() => {
		const vconsole = new VConsole()
		console.log('vConsole 调试工具已启用')
		console.log('当前环境:', import.meta.env.MODE)
		console.log('当前路由:', route.path)
	})
</script>

<template>
	<div>
    <!-- <nav>
      <router-link to="/register">注册</router-link> |
      <router-link to="/login">登录</router-link> |
      <router-link to="/">首页</router-link> |
      <router-link to="/about">配置</router-link> |
      <router-link to="/profile">我的&余额</router-link> |
      <router-link to="/forgot-password">找回密码</router-link> |
      <router-link to="/updata-password">更改密码</router-link> |
			<router-link to="/ws">连接ws</router-link> |
    </nav> -->
    <router-view v-slot="{ Component, route }">
      <keep-alive :include="[]">
        <component :is="Component" :key="route.path" />
      </keep-alive>
    </router-view>
	 <CloudComputeModal />
	 <TabBar v-if="showTabBar" />
  </div>
	<!-- <div class="app-container">
		<router-view />
		<TabBar v-if="showTabBar" />
	</div> -->
</template>

<style lang="scss">
	.app-container {
		min-height: 100vh;
		position: relative;
	}

	// 响应式设计
	@media (max-width: 480px) {
		.header {
			padding: 15px;

			.header-title {
				font-size: 16px;
			}
		}
	}

	.pages {
		display: flex;
		flex-direction: column;
		height: 100vh;
		width: 100%;
		box-sizing: border-box;
		background: #006CFF;
	}

	.header {
		padding: 15px;
		background: transparent;
		display: flex;
		align-items: center;
		height: 80px;
		padding-top: 46px !important;
		box-sizing: border-box;

		.back-button {
			background: transparent;
			border: none;
			padding: 5px;
			margin-right: 10px;
			cursor: pointer;

			.back-icon {
				font-size: 18px;
				font-weight: bold;
			}
		}

		.header-title {
			font-size: 18px;
			font-weight: 500;
		}

		.fff {
			color: #ffffff;
		}
	}

	/* 动画关键帧定义 */
	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translate3d(0, 20px, 0);
		}

		to {
			opacity: 1;
			transform: translate3d(0, 0, 0);
		}
	}

	@keyframes fadeInDown {
		from {
			opacity: 0;
			transform: translate3d(0, -20px, 0);
		}

		to {
			opacity: 1;
			transform: translate3d(0, 0, 0);
		}
	}

	@keyframes pulse {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.05);
		}

		100% {
			transform: scale(1);
		}
	}

	@keyframes float {
		0% {
			transform: translateY(0px);
		}

		50% {
			transform: translateY(-5px);
		}

		100% {
			transform: translateY(0px);
		}
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	/* 动画类 */
	.animate__fadeIn {
		animation: fadeIn 0.8s ease forwards;
	}

	.animate__fadeInUp {
		animation: fadeInUp 0.8s ease forwards;
		opacity: 0;
	}

	.animate__fadeInDown {
		animation: fadeInDown 0.8s ease forwards;
		opacity: 0;
	}

	.animate__delay-1 {
		animation-delay: 0.1s;
	}

	.animate__delay-2 {
		animation-delay: 0.2s;
	}

	.animate__delay-3 {
		animation-delay: 0.3s;
	}

	.animate__delay-4 {
		animation-delay: 0.4s;
	}

	.animate__delay-5 {
		animation-delay: 0.5s;
	}

	.animate__delay-6 {
		animation-delay: 0.6s;
	}

	.textarea-block,
	.input-block {
		transition: all 0.3s ease;
	}

	.textarea-block:focus-within,
	.input-block:focus-within {
		border-color: #006cff !important;
		box-shadow: 0 0 0 2px rgba(0, 108, 255, 0.1);
		background: #fff !important;
	}
  .textarea-block.huashu:focus-within {
    border: 1px solid #006cff !important;
		box-shadow: 0 0 0 2px rgba(0, 108, 255, 0.1) !important;
		background: #F5F6F9 !important;
  }
</style>